<template>
	<view>
		<view class="content">
			<!-- #ifdef MP -->
			<view class="col">
				<channel-live v-if="livingStatus==2" :feed-id="feedId" :finder-user-name="finderUserName"></channel-live>
			</view>
			<!-- #endif -->
			
			<view class="col" v-for="(item,index) in livingReplayList" :key="index">
				<template v-if="item.audit==1">
					<view class="u-flex poster-wrap" @click="openLink()">
						<image style="height:390rpx;width:690rpx;display: block;" :src="item.video_poster"></image>
					</view>
				</template>
				<template v-else>
					<video v-if="currentId == item.id" style="width: 690rpx;height: 390rpx; display: block;" autoplay="true" :id="'video'+item.id" :src="item.link" @play="videoOnPlay" @click="play(item.id,index)"></video>
					<view class="u-flex poster-wrap"  v-else @click="play(item.id,index)">
						<image style="height:390rpx;width:690rpx;display: block;" :src="item.video_poster"></image>
						<view class="block">
							<view class="sanjia"></view>
						</view>
					</view>
				</template>
				
				<view class="name">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config'
	import { livingReplays,livingReplayPlusPlays } from '@/api/api.js'
	export default {
		data() {
			return {
				list: [],
				currentId: 0,
				scrollH: 0,
				scrollTop: 0,
				height: 0,
				windowHeight: 0,
				feedId: '',
				finderUserName: config.finderUserName,
				livingReplayList: [],
				livingStatus: 0
			}
		},
		mounted() {
			// #ifdef MP
			var _this = this
			wx.getChannelsLiveInfo({
				finderUserName: _this.finderUserName,
				success(res) {
					_this.feedId = res.feedId
					_this.livingStatus = res.status
				},
				fail(error) {
					console.log(error)
				}
			})
			// #endif
		},
		onLoad() {
			let that = this
			this.getList()
			// 获取可视区域高度
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		onShow() {

		},
		onPageScroll(res) {
			// 获取滚动距离
			this.scrollH = res.scrollTop
			// 判断元素是否已经出了可视区
			if (this.scrollH > this.scrollTop || this.scrollH + this.windowHeight < this.scrollTop) {
				const e = uni.createVideoContext("video" + this.currentId, this);
				e.pause()
			}
		},
		onHide() {
			this.currentId = 0
		},
		methods: {
			play(id, i) {
				this.currentId = id
				// 获取当前播放视频 元素距离顶部的高度
				if (this.height == 0) {
					uni.createSelectorQuery().select('.col').boundingClientRect((res) => {
						this.height = res.height
						this.scrollTop = res.height * (i + .5)
					}).exec()
				} else {
					this.scrollTop = this.height * (i + .5)
				}
			}
			,videoOnPlay() {
				livingReplayPlusPlays(this.currentId).then(_=>{
					console.log(_)
				})
			}
			,getList() {
				livingReplays().then(res=>{
					this.livingReplayList = res.data
				})
			}
			,openLink() {
				uni.navigateTo({
					url: '/pagesA/pages/living/details'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.content {
		padding: 30rpx;
	}

	.name {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 0 0 10px 10px;
		background-color: #FFFFFF;
		text-align: center;
		font-size: 14px;
	}

	.col {
		overflow: hidden;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
		.poster-wrap {
			.block {
				position: absolute;
				width: 100%;
				height: 390rpx;
				background-color: rgba($color: #000000, $alpha: .4);
				/** background: url('../../static/logo.png') no-repeat;*/
				background-size: cover;
				left: 0;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.sanjia {
					width: 0;
					height: 0;
					border-top: 12px solid transparent;
					border-left: 17px solid #FFFFFF;
					border-bottom: 12px solid transparent;
				}
			}
		}
	}
</style>
